// 1. 装包
// 2. 引入
// 3. 用Vue安装插件（和Vue关联）
// 4. 创建路由器实例
// 5. 挂载到Vue根实例身上（和Vue根实例关联）


// 说明：一个模块中，所有的导入代码（import...）按语法规范，应该统一放在最上面，不能在中间穿插其他业务逻辑代码
import Vue from 'vue'
import VueRouter from 'vue-router'

import LayoutPage from '../views/Layout.vue'
import HomePage from '../views/Home.vue'
import FindHousePage from '../views/FindHouse.vue'
import InformationPage from '../views/Information.vue'
import MyPage from '../views/My.vue'
import HouseDetailPage from '../views/HouseDetail.vue'

Vue.use(VueRouter)

const router = new VueRouter({
  mode: 'hash', // hash（默认）、history
  // 路由规则配置在哪个选项中？ routes
  routes: [
    // 在路由中配置的组件，称为路由组件，或者叫页面组件，一般放在 src/views 文件夹下

    // 路由重定向
    { path: '/', redirect: '/home' },

    {
      path: '/layout', component: LayoutPage,
      children: [
        // 这些是属于二级路由，应该在 LayoutPage 之下

        // 1. 如果 path 【是绝对路径】（以 / 开头），那么【最终的路径地址】就会【无视】父路由的 path，比如：{ path: '/home', component: HomePage }, 最终的【访问地址】就是：/home
        // 2. 如果 path 【不是绝对路径】（相对路径）（不以 / 开头），那么【最终的路径地址】就会【带上】父路由的 path，比如：{ path: 'home', component: HomePage }, 最终的【访问地址】就是：/父路径/home
        { name: 'HomePage', path: '/home', component: HomePage }, // => /layout/home
        { name: 'FindHousePage', path: '/find-house', component: FindHousePage }, // => /find-house
        { name: 'InfoPage', path: '/info', component: InformationPage },
        { name: 'MyPage', path: '/my', component: MyPage },
      ]
    },


    // 只需要少量参数，可以用路径参数来接收，如果参数比较多，就用查询参数来接收
    // 如果路径参数可选，用在path配置的参数名称后加一个?即可
    // 这个 name 随便起，只要保证在所有的路由配置中唯一即可
    { name: 'HouseDetailPage', path: '/detail/:id?', component: HouseDetailPage },

  ]
})

export default router